<template>
  <div class="demo-container">
    <div class="demo-content">
      <h1>嵌入式聊天窗口 - 使用示例</h1>

      <div class="demo-section">
        <h2>功能说明</h2>
        <p>
          嵌入式聊天窗口是为了方便其他系统集成而设计的独立聊天界面。
          通过URL参数传递token和数据集ID，可以直接打开指定的聊天会话。
        </p>
      </div>

      <div class="demo-section">
        <h2>URL参数说明</h2>
        <ul>
          <li><strong>token</strong> (必需): 用户访问令牌，用于身份验证</li>
          <li><strong>dataset_id</strong> (可选): 数据集ID，指定要使用的数据集</li>
        </ul>
      </div>

      <div class="demo-section">
        <h2>使用示例</h2>

        <div class="example-item">
          <h3>示例1: 仅使用token，加载用户最新会话</h3>
          <div class="url-example">
            <code>{{ baseUrl }}/embed-chat?token=your_access_token_here</code>
          </div>
          <el-button type="primary" @click="openExample1" :disabled="!demoToken" size="small">
            打开示例1
          </el-button>
        </div>

        <div class="example-item">
          <h3>示例2: 使用token和数据集ID，加载指定数据集的会话</h3>
          <div class="url-example">
            <code
              >{{
                baseUrl
              }}/embed-chat?token=your_access_token_here&dataset_id=your_dataset_id</code
            >
          </div>
          <el-button
            type="primary"
            @click="openExample2"
            :disabled="!demoToken || !demoDatasetId"
            size="small"
          >
            打开示例2
          </el-button>
        </div>
      </div>

      <div class="demo-section">
        <h2>集成配置</h2>
        <p>为了演示功能，请先配置测试参数：</p>

        <el-form :model="config" label-width="120px" class="config-form">
          <el-form-item label="访问Token:">
            <el-input
              v-model="config.token"
              placeholder="请输入有效的用户token"
              type="textarea"
              :rows="2"
            />
            <div class="form-help">从浏览器开发者工具的localStorage中获取token，或通过API获取</div>
          </el-form-item>

          <el-form-item label="数据集ID:">
            <el-input v-model="config.datasetId" placeholder="请输入数据集ID（可选）" />
            <div class="form-help">指定要使用的数据集ID，如果不指定将使用用户最新的会话</div>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="saveConfig">保存配置</el-button>
            <el-button @click="loadCurrentToken">获取当前Token</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="demo-section">
        <h2>技术说明</h2>
        <div class="tech-notes">
          <h3>权限验证</h3>
          <p>嵌入式窗口通过URL中的token参数进行身份验证，无需额外登录流程。</p>

          <h3>会话管理</h3>
          <ul>
            <li>如果指定了dataset_id，系统会查找基于该数据集的最新会话</li>
            <li>如果没有找到对应会话，系统会自动创建新会话</li>
            <li>如果没有指定dataset_id，系统会加载用户的最新会话</li>
          </ul>

          <h3>功能限制</h3>
          <ul>
            <li>嵌入式窗口不支持创建新对话</li>
            <li>嵌入式窗口不支持创建新数据集</li>
            <li>专注于现有会话的聊天交互</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getToken } from '../api/auth'

// 配置数据
const config = ref({
  token: '',
  datasetId: '',
})

// 基础URL
const baseUrl = computed(() => {
  return window.location.origin
})

// 演示用的token和数据集ID
const demoToken = computed(() => config.value.token.trim())
const demoDatasetId = computed(() => config.value.datasetId.trim())

// 保存配置到localStorage
const saveConfig = () => {
  localStorage.setItem('embed-chat-demo-config', JSON.stringify(config.value))
  ElMessage.success('配置已保存')
}

// 从localStorage加载配置
const loadConfig = () => {
  const saved = localStorage.getItem('embed-chat-demo-config')
  if (saved) {
    try {
      config.value = JSON.parse(saved)
    } catch (error) {
      console.error('加载配置失败:', error)
    }
  }
}

// 获取当前登录用户的token
const loadCurrentToken = () => {
  const currentToken = getToken()
  if (currentToken) {
    config.value.token = currentToken
    ElMessage.success('已获取当前Token')
  } else {
    ElMessage.warning('当前未登录，请先登录或手动输入Token')
  }
}

// 打开示例1
const openExample1 = () => {
  const url = `${baseUrl.value}/embed-chat?token=${encodeURIComponent(demoToken.value)}`
  window.open(url, '_blank', 'width=1200,height=800')
}

// 打开示例2
const openExample2 = () => {
  const url = `${baseUrl.value}/embed-chat?token=${encodeURIComponent(demoToken.value)}&dataset_id=${encodeURIComponent(demoDatasetId.value)}`
  window.open(url, '_blank', 'width=1200,height=800')
}

// 页面挂载时加载配置
onMounted(() => {
  loadConfig()
})
</script>

<style scoped>
.demo-container {
  min-height: 100vh;
  background: var(--app-background, #f5f5f5);
  padding: 20px;
}

.demo-content {
  max-width: 800px;
  margin: 0 auto;
  background: var(--app-card-bg, #ffffff);
  padding: 30px;
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-md);
}

.demo-section {
  margin-bottom: 30px;
}

.demo-section h1 {
  color: var(--app-text-primary);
  margin-bottom: 20px;
  text-align: center;
}

.demo-section h2 {
  color: var(--app-text-primary);
  margin-bottom: 15px;
  border-bottom: 2px solid var(--el-color-primary);
  padding-bottom: 5px;
}

.demo-section h3 {
  color: var(--app-text-primary);
  margin-bottom: 10px;
  margin-top: 20px;
}

.demo-section p,
.demo-section li {
  color: var(--app-text-regular);
  line-height: 1.6;
}

.demo-section ul {
  padding-left: 20px;
}

.example-item {
  margin-bottom: 20px;
  padding: 15px;
  background: var(--app-background, #f9f9f9);
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-border-color, #e5e7eb);
}

.url-example {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
  border: 1px solid #e9ecef;
}

.url-example code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  color: #d63384;
  word-break: break-all;
}

.config-form {
  background: var(--app-background, #f9f9f9);
  padding: 20px;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-border-color, #e5e7eb);
}

.form-help {
  font-size: 12px;
  color: var(--app-text-secondary);
  margin-top: 5px;
  line-height: 1.4;
}

.tech-notes {
  background: var(--app-background, #f9f9f9);
  padding: 20px;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--app-border-color, #e5e7eb);
}

.tech-notes h3 {
  color: var(--el-color-primary);
  margin-top: 0;
}

.tech-notes ul {
  margin-bottom: 15px;
}

/* 暗色模式 */
:global(.dark-mode) .demo-container {
  background: var(--app-background, #1a1a1a);
}

:global(.dark-mode) .demo-content {
  background: var(--app-card-bg, #2d2d2d);
}

:global(.dark-mode) .example-item {
  background: var(--app-background, #252525);
  border-color: var(--app-border-color, #404040);
}

:global(.dark-mode) .url-example {
  background: #343a40;
  border-color: #495057;
}

:global(.dark-mode) .url-example code {
  color: #f8d7da;
}

:global(.dark-mode) .config-form,
:global(.dark-mode) .tech-notes {
  background: var(--app-background, #252525);
  border-color: var(--app-border-color, #404040);
}
</style>
